<template>
<header id="head_top">
  <slot name="logo"></slot>
  <slot name="search"></slot>
  <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
    <icon-svg icon-class="iconiconfontjiantouzuo" class="goback_svg"></icon-svg>
  </section>
  <router-link :to="userInfo ? '/profile' : '/login'" v-if="signinUp" class="head_login">
    <icon-svg icon-class="iconuser" v-if="userInfo" class="iconuser"></icon-svg>
    <span class="login_span" v-else>登录|注册</span>
  </router-link>
  <section class="title_head ellipsis" v-if="headTitle">
    <span class="title_text">{{ headTitle }}</span>
  </section>
  <slot name="edit"></slot>
  <slot name="msite-title"></slot>
  <slot name="changecity"></slot>
  <slot name="changeLogin"></slot>
</header>
</template>

<script>
import {
  mapState,
  mapActions
} from "vuex";

export default {
  name: "head_top",

  data() {
    return {};
  },
  props: ["goBack", "signinUp", "headTitle"],
  mounted() {
    //获取用户信息
    this.getUserInfo();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapActions(["getUserInfo"]),
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin";

#head_top {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;

  background-color: $blue;
  @include wh(100%, 1.95rem);
}

.user_avatar,
.login_span {
  right: 0.5rem;

  @include ct;

  @include sc(0.7rem, #fff);
}

.head_goback {
  float: left;
  height: 100%;

  .goback_svg {
    color: #fff;

    @include ct;
  }
}

.title_head {
  height: 1.95rem;

  @include center;

  .title_text {
    color: #fff;

    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.95rem;

    text-align: center;
  }
}

.iconuser {
  right: 0.5rem;
  color: #fff;
  @include ct;
}
</style>
